<template>
  <div>
    <editor
      v-if="element.type === 'editor'"
      v-model="changeValue"
      :placeholder="
        '请输入' + element.placeholder ? element.placeholder : element.label
      "
      @change="handleChange(changeValue)"
    />

    <span v-else-if="element.type === 'show'" :label="element.label">
      <template v-if="element.key">
        {{ value }}
      </template>
      <template v-else>
        {{ element.value }}
      </template>
    </span>

    <a-select
      v-else-if="element.type === 'select'"
      v-model="changeValue"
      style="width: 100%;"
      :mode="element.radio ? 'default' : 'multiple'"
      allow-clear
      :placeholder="element.placeholder ? element.placeholder : element.label"
      @change="dataChange(changeValue, element.selectArray)"
    >
      <a-select-option
        v-for="(item, index) in element.selectArray"
        :key="index"
        :value="item.value"
      >
        {{ item.label }}
      </a-select-option>
    </a-select>

    <a-radio-group
      v-else-if="element.type === 'radio'"
      v-model="changeValue"
      :options="element.radioArray"
      @change="dataChange(changeValue, element.radioArray)"
    />

    <a-radio-group
      v-else-if="element.type === 'radioGroup'"
      v-model="changeValue"
      :button-style="element.buttonStyle"
      @change="dataChange(changeValue, element.radioArray)"
    >
      <a-radio-button
        v-for="(item, index) in element.radioArray"
        :key="index"
        :value="item.value"
      >
        {{ item.label }}
      </a-radio-button>
    </a-radio-group>

    <a-checkbox-group
      v-else-if="element.type === 'checkbox'"
      v-model="changeValue"
      :options="element.checkboxArray"
      @change="dataChange(changeValue, element.checkboxArray)"
    />

    <a-switch
      v-else-if="element.type === 'switch'"
      v-model="changeValue"
      :checked-children="element.checkedLabel"
      :un-checked-children="element.unCheckedLabel"
    />
    <!-- :style="{
        width: element.width ? element.width : undefined,
      }" -->
    <a-input-number
      v-else-if="element.type === 'number'"
      v-model="changeValue"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      :min="element.number ? element.number.min : undefined"
      :max="element.number ? element.number.max : undefined"
      :formatter="element.number ? element.number.formatter : undefined"
      :parser="element.number ? element.number.parser : undefined"
      :precision="element.number ? element.number.precision : undefined"
      :style="{
        width: element.width ? element.width : undefined,
      }"
      @change="(val) => (item = val)"
    />

    <a-textarea
      v-else-if="element.type === 'textarea'"
      v-model="changeValue"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      :auto-size="{ minRows: element.autoSize ? element.autoSize : 8 }"
    />

    <a-date-picker
      v-else-if="element.type === 'date-picker'"
      v-model="changeValue"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      :disabled-date="element.disabledDate"
      format="YYYY-MM-DD"
      @change="(val) => (item = val)"
    />

    <a-range-picker
      v-else-if="element.type === 'range-picker'"
      v-model="changeValue"
      :placeholder="
        element.placeholder && $func.isArray(element.placeholder)
          ? element.placeholder
          : undefined
      "
      :disabled-date="element.disabledDate"
      :ranges="$day.selectRanges()"
      format="YYYY-MM-DD"
      @change="(val) => (item = val)"
    />

    <a-tooltip
      v-else-if="element.type === 'tooltip'"
      :trigger="['focus']"
      placement="topLeft"
    >
      <template slot="title">
        <span v-if="changeValue">
          {{ $func.strShow(changeValue, " ", 4) }}
        </span>
        <span v-else> 请输入{{ element.label }} </span>
      </template>
      <a-input
        v-model="changeValue"
        :max-length="element.maxlength ? element.maxlength * 1 : undefined"
        :placeholder="element.placeholder ? element.placeholder : element.label"
      />
    </a-tooltip>

    <span v-else-if="element.type === 'icon'" :label="element.label">
      <a-tooltip>
        <template slot="title">
          点击修改图标
        </template>
        <a @click="visible = true">
          <app-icon
            v-if="changeValue"
            style="font-size: 1.3rem;"
            :value="changeValue"
          />
          <span v-else>无图标，点击选择</span>
        </a>
      </a-tooltip>

      <app-icon-select
        v-model="visible"
        @change="(val) => (changeValue = val)"
      />
    </span>

    <!-- 
      
    <mx-admin-select
      v-else-if="element.type === 'admin-select'"
      v-model="changeValue"
      :radio="element.radio"
      width="100%"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      @change="(val) => (item = val)"
    />

    <mx-data-select
      v-else-if="element.type === 'data-select'"
      v-model="changeValue"
      :radio="element.radio"
      :search-map="element.searchMap"
      :url="element.url"
      :init="element.init"
      :selected="element.selected ? true : false"
      width="100%"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      @change="(val) => (item = val)"
    />

 -->
    <app-tree-select
      v-else-if="element.type === 'app-tree-select'"
      v-model="changeValue"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      :code="element.code"
      :radio="element.radio"
      width="100%"
      @change="(val) => (item = val)"
    />
    <app-select
      v-else-if="element.type === 'app-select'"
      v-model="changeValue"
      :placeholder="element.placeholder ? element.placeholder : element.label"
      :code="element.code"
      :radio="element.radio"
      width="100%"
      @change="(val) => (item = val)"
    />

    <a-tooltip
      v-else-if="element.type === 'app-map-getpoint'"
      title="获取经纬度"
    >
      <a-icon type="environment" @click="pointChangeShow" />
    </a-tooltip>

    <a-select
      v-else-if="element.type === 'color'"
      v-model="changeValue"
      style="width: 100%;"
      mode="default"
      allow-clear
      placeholder="请选择颜色"
      @change="dataChange(changeValue, element.selectArray)"
    >
      <a-select-option
        v-for="(value, index) in colorArray"
        :key="index"
        :value="value"
      >
        <a-tag :color="value">
          {{ value }}
        </a-tag>
      </a-select-option>
    </a-select>

    <a-input
      v-else
      v-model="changeValue"
      allow-clear
      :max-length="element.maxlength ? element.maxlength * 1 : undefined"
      :placeholder="element.placeholder ? element.placeholder : element.label"
    />

    <app-map-getpoint
      v-model="pointVisible"
      :longitude="
        changeValue && changeValue.longitude && changeValue.longitude * 1 > 0
          ? changeValue.longitude * 1
          : null
      "
      :latitude="
        changeValue && changeValue.latitude && changeValue.latitude * 1 > 0
          ? changeValue.latitude * 1
          : null
      "
      @change="pointChange"
      @cancel="pointChangeCancel"
    />

    <template v-if="debug">
      {{ changeValue }}
    </template>
  </div>
</template>
<script>
const lng = 116.39745,
  lat = 39.909174
export default {
  components: {
    editor: () => import("@/components/editor"),
  },
  model: {
    prop: "value",
    event: "change-model-value",
  },
  props: {
    value: {
      type: [String, Number, Array, Object, Boolean],
      default: () => {
        return undefined
      },
    },
    element: {
      type: Object,
      default: () => {
        return undefined
      },
    },
    debug: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      visible: false,
      changeValue: this.value,
      item: undefined,

      colorArray: [
        "pink",
        "red",
        "orange",
        "green",
        "cyan",
        "blue",
        "purple",
        "#f50",
        "#2db7f5",
        "#87d068",
        "#108ee9",
      ],

      //地图
      mapData: {
        zoom: 14,
        center: [lng, lat],
        plugin: [
          "ToolBar",
          {
            pName: "MapType",
            defaultType: 0,
            events: {
              init() {},
            },
          },
        ],
        markers: [
          {
            position: [lng, lat],
            events: {},
            visible: true,
          },
        ],

        texts: [],
      },
      pointVisible: false,
    }
  },
  watch: {
    value() {
      this.changeValue = this.value
    },
    changeValue() {
      if (this.changeValue == this.value) return
      this.$emit("change-model-value", this.changeValue)

      this.$emit(
        "change",
        this.item ? this.item : this.changeValue,
        this.element.ext
      )
    },
  },
  methods: {
    dataChange(val, arr) {
      if (!val) {
        this.item = undefined
        return
      }

      let objTmp = {}
      for (let ii in arr) {
        objTmp[arr[ii].value] = arr[ii].data ? arr[ii].data : undefined
      }

      if (this.$func.isArray(val)) {
        let tmpArr = []
        for (let ii in val) {
          tmpArr.push(
            Object.prototype.hasOwnProperty.call(objTmp, val[ii]) &&
              objTmp[val[ii]]
              ? objTmp[val[ii]]
              : val[ii]
          )
        }
        this.item = tmpArr.length > 0 ? tmpArr : undefined
      } else {
        if (Object.prototype.hasOwnProperty.call(objTmp, val)) {
          this.item = objTmp[val]
        }
      }
    },
    // 地图位置
    pointChangeShow() {
      this.pointVisible = true
    },
    pointChangeCancel() {
      this.pointVisible = false
    },
    pointChange(longitude, latitude) {
      this.changeValue = {
        longitude: longitude,
        latitude: latitude,
      }

      this.pointChangeCancel()
    },
  },
}
</script>
